<template>
    <div>
        <!-- 首页头部 -->
        <!-- 轮播图 -->
        <div class="swiper">
            <div class="headerSwiper">
                <el-carousel :interval="5000" arrow="hover" height="466px">
                    <el-carousel-item v-for="(banner,index) in bannerList" :key="banner.id">
                        <a :href="banner.link" target="_blank"><img :src="banner.pcAdvertiseUrl" alt=""></a>
                    </el-carousel-item>
                </el-carousel>
            </div>
        </div>


        <!-- 导航头外层 -->
        <div class="navContainerWrap">
            <div class="navContainer">
                <!-- more这类名是在内容过多时显示 -->

                <div class="fixedBox" :class="[{beforeMore:before},{afterMore:after}]">
                    <ul class="navCenter " ref="navCenterRef">

                        <li v-for="(item,index) in routerArr" @click="clickHandler($event)" :key="index">
                            <router-link :class="{active:num==index}" :to="item.path" @click="num=index">{{item.text}}
                            </router-link>

                        </li>
                        <li v-for="(item,index) in recommendStore.checkedHobbies" @click="clickHandler($event)"
                            :key="item.id">
                            <router-link :class="{active:num==item.id}" :to="`/index/`+item.id" @click="num=item.id">
                                {{item.name}}</router-link>

                        </li>

                        <!-- <li><router-link to="/index/attention">舞蹈</router-link></li> -->
                    </ul>
                </div>

                <div class="hobby" @click="handlerShow">
                    <svg t="1666093441558" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="28386" width="16" height="16"
                        data-spm-anchor-id="a313x.7781069.0.i12">
                        <path
                            d="M127.045251 235.759324c-62.631527 0-113.042268-52.447539-113.042267-117.625062S64.922924 0.509199 127.045251 0.509199c62.631527 0 113.042268 52.447539 113.042268 117.625063 0 64.668324-50.410741 117.115863-113.042268 117.625062zM127.045251 627.333665c-62.631527 0-113.042268-52.447539-113.042267-117.625062s50.91994-117.625062 113.042267-117.625062c62.631527 0 113.042268 52.447539 113.042268 117.625062s-50.410741 117.625062-113.042268 117.625062zM127.045251 1018.908006c-62.631527 0-113.042268-52.447539-113.042267-117.625062 0-64.668324 50.91994-117.625062 113.042267-117.625062 62.631527 0 113.042268 52.447539 113.042268 117.625062s-50.410741 117.625062-113.042268 117.625062zM512 235.250124c-62.631527 0-113.042268-52.447539-113.042268-117.625062C398.957732 52.956738 449.877673 0 512 0c62.631527 0 113.042268 52.447539 113.042268 117.625062s-50.410741 117.625062-113.042268 117.625062zM512 627.333665c-62.631527 0-113.042268-52.447539-113.042268-117.625062s50.91994-117.625062 113.042268-117.625062c62.631527 0 113.042268 52.447539 113.042268 117.625062s-50.410741 117.625062-113.042268 117.625062zM512 1018.908006c-62.631527 0-113.042268-52.447539-113.042268-117.625062 0-64.668324 50.91994-117.625062 113.042268-117.625062 62.631527 0 113.042268 52.447539 113.042268 117.625062s-50.410741 117.625062-113.042268 117.625062zM896.954749 240.342118c-62.631527 0-113.042268-52.447539-113.042268-117.625062 0-64.668324 50.410741-117.625062 113.042268-117.625062 62.631527 0 113.042268 52.447539 113.042267 117.625062s-50.410741 117.625062-113.042267 117.625062zM896.954749 632.425659c-62.631527 0-113.042268-52.447539-113.042268-117.625062s50.410741-117.625062 113.042268-117.625062c62.631527 0 113.042268 52.447539 113.042267 117.625062s-50.410741 117.625062-113.042267 117.625062zM896.954749 1024c-62.631527 0-113.042268-52.447539-113.042268-117.625062 0-64.668324 50.410741-117.625062 113.042268-117.625062 62.631527 0 113.042268 52.447539 113.042267 117.625062s-50.410741 117.625062-113.042267 117.625062z"
                            p-id="28387" fill="#7d8090"></path>
                    </svg>
                    选择兴趣技能
                </div>
            </div>
        </div>
        <!-- 点击选择兴趣技能弹出对话框 -->
        <!-- <el-dialog v-model="dialogFormVisible" style="width: 1024px;height:630px;">
            <div class="hobbyTitle">
                <div class="title">
                    选择我的兴趣技能<span>{{crumbs.length}} / 7</span>
                </div>
                <div class="text">例如舞蹈就选舞种</div>
            </div>
            <el-form>
                <el-form-item>
                    <div class="inputBox">
                        <el-input v-model="inputValue" class="w-50 m-2" placeholder="搜索兴趣技能" :prefix-icon="Search" />
                    </div>
                    <el-button @click="" style="margin-left: 10px;">搜索</el-button>
                </el-form-item>
            </el-form>
         
            <div class="crumbsBox">
                <div class="crumbs" v-for="(tag,index) in crumbs" :key="index"> {{tag.name}} <span
                        @click="removeCrumb(tag,index)"><svg t="1666231319556" class="icon" viewBox="0 0 1024 1024"
                            version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3113" width="20" height="20">
                            <path
                                d="M511.998977 961.610044c-248.306272 0-449.607998-201.307865-449.607998-449.614138S263.692704 62.389956 511.998977 62.389956c248.364601 0 449.610044 201.299679 449.610044 449.606974S760.363577 961.610044 511.998977 961.610044L511.998977 961.610044zM718.186989 380.921639c8.457626-8.462742 8.457626-22.202675 0-30.658254l-45.927005-45.871747c-8.459672-8.459672-22.138206-8.459672-30.599925 0L511.603981 434.44874 381.546879 304.391638c-8.459672-8.459672-22.1423-8.459672-30.599925 0l-45.927005 45.871747c-8.457626 8.455579-8.457626 22.195511 0 30.658254l130.057101 130.053008L305.019948 641.031748c-8.457626 8.455579-8.457626 22.140253 0 30.599925L350.946954 717.555609c8.457626 8.404414 22.140253 8.404414 30.599925 0l130.057101-130.057101L641.661082 717.555609c8.461719 8.404414 22.140253 8.404414 30.599925 0l45.927005-45.922912c8.457626-8.459672 8.457626-22.144346 0-30.599925L588.129888 510.97567 718.186989 380.921639 718.186989 380.921639z"
                                p-id="3114" fill="#bfbfbf"></path>
                        </svg></span></div>
            </div>
            <div style="margin: 8px 0 10px 0;">推荐兴趣技能</div>
            <div class="tagListBox">
                <el-scrollbar height="400px" style="padding-top: 10px;">
                    <div class="tagItem" v-for="(item,index) in hobbies" @click="handlerChange(item,index)"
                        :key="index">{{item.name}}<span v-show="item.flag"><svg t="1666228870131" class="icon"
                                viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2585"
                                width="20" height="20">
                                <path
                                    d="M512 64C264.576 64 64 264.576 64 512s200.576 448 448 448 448-200.576 448-448S759.424 64 512 64z m301.264 333.245L493.637 716.872c-0.127 0.129-0.245 0.264-0.373 0.392-12.499 12.499-28.882 18.747-45.265 18.745-16.382 0.003-32.765-6.246-45.265-18.745-0.128-0.128-0.246-0.263-0.373-0.392L210.736 525.245c-24.994-24.994-24.994-65.516 0-90.51 24.993-24.993 65.516-24.993 90.51 0L448 581.49l274.755-274.755c24.994-24.993 65.516-24.993 90.51 0 24.993 24.994 24.993 65.517-0.001 90.51z"
                                    p-id="2586" fill="#d4237a"></path>
                            </svg></span></div>
                </el-scrollbar>
            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogFormVisible = false" style="height: 40px;width:130px">取消</el-button>
                    <el-button type="primary" @click="dialogFormVisible = false" style="height: 40px;width:130px"
                        color="#f93684">确定
                    </el-button>
                </span>
            </template>
        </el-dialog> -->
        <Hobbies ref="hobbiesRef" />

        <!-- 此处应该是上方推荐   等的路由展示区 -->
        <router-view></router-view>






    </div>
</template>

<script setup lang="ts">
// 引入兴趣爱好对话框组件
import Hobbies from '../../components/hobbies/index.vue'
import bus from '../../bus/index'
import { useRouter, useRoute } from "vue-router"
import { reqBanner, reqVideoList } from '../../api/recommend/recommend'
import { reactive, ref, onMounted, watch, nextTick } from 'vue'
import useRecommendStore from "@/stores/recommend";

import useCenterStore from "@/stores/center";
const centerStore = useCenterStore();
const recommendStore = useRecommendStore();

const router = useRouter();
const route = useRoute();
//推荐区的路由跳转
let routerArr = ref([{
    text: "推荐",
    path: "/index/recommend"
},
{
    text: "作品",
    path: "/index/original"
},
{
    text: "教程",
    path: "/index/course"
},
{
    text: "专题",
    path: "/index/specialTopic"
},
{
    text: "动态",
    path: "/index/information"
},
{
    text: "关注",
    path: "/index/attention"
}


])
let newArr = ref([])
let num = ref(0)
// 轮播图
let bannerList = ref([])

// 设置导航滚动时需要获取该元素的offsetWidth
const navCenterRef = ref();
// 前后的阴影
const before = ref(false);
const after = ref(false);

// 设置导航左右两侧的阴影
const setShadowShow = () => {
    let left = 1000 - navCenterRef.value.clientWidth;
    after.value = navCenterRef.value.offsetLeft > left ? true : false;
    // 需要获取偏移量只能用offset  style.left不行     
    before.value = navCenterRef.value.offsetLeft < 0 ? true : false;
}

const clickHandler = (event) => {

    nextTick(() => {
        if (window.scrollY > 800) {
            console.log("过高", window.scrollY);
            window.scrollTo({ top: 546, left: 0, behavior: 'smooth' });
            console.log(window.scrollY);
        }
    })



    if (!event) {
        nextTick(() => {
            if (navCenterRef.value.offsetWidth < 1000) {
                console.log("盒子的偏移", containerW);
                navCenterRef.value.style.left = (500 - navCenterRef.value.offsetWidth / 2) + "px";
            } else {
                navCenterRef.value.style.left = 0;
            }
        })
        return;
    }

    // console.log(event.target.offsetWidth,navCenterRef.value.offsetWidth,navCenterRef.value.scrollLeft);
    let containerW = navCenterRef.value.offsetWidth;
    let containerOffset = navCenterRef.value.offsetLeft;
    let targetW = event.target.offsetWidth;
    let targetOffset = event.target.offsetLeft;
    let left = targetOffset - 500 + targetW / 2;
    if (containerW < 1000) {
        console.log("盒子的偏移", containerW);

        navCenterRef.value.style.left = (500 - containerW / 2) + "px";
        return;
    }

    if (targetOffset < 500) {
        navCenterRef.value.style.left = 0;
        setShadowShow();
        return;
    }
    if (left > containerW - 1000) {
        navCenterRef.value.style.left = (1000 - containerW) + "px";
        setShadowShow();
        return;
    }
    console.log("left", left);

    navCenterRef.value.style.left = -left + "px";
    setShadowShow();

}



// 存储兴趣爱好组件实例
let hobbiesRef = ref()



//  获取兴趣爱好
const getHobby = async () => {
    console.log(recommendStore.checkedHobbies);

    num.value = routerArr.value.findIndex(item => item.path == route.path);
    if (num.value == -1) {
        let index = recommendStore.checkedHobbies.findIndex(item => "/index/" + item.id == route.path);
        num.value = recommendStore.checkedHobbies[index].id;

    }
    setShadowShow();
}



// 获取初始数据
const getInitRecommend = async () => {
    let result = await reqBanner()
    centerStore.getUserInfo();
    bannerList.value = result;
    getHobby();

}
watch(() => recommendStore.checkedHobbies, () => {
    setShadowShow();
    nextTick(() => {
        if (navCenterRef.value.offsetWidth < 1000) {
            console.log("盒子的偏移23", navCenterRef.value.offsetWidth);
            navCenterRef.value.style.left = (500 - navCenterRef.value.offsetWidth / 2) + "px";
        } else {
            navCenterRef.value.style.left = 0;
        }
    })



}, { deep: true })



onMounted(() => {
    num.value = routerArr.value.findIndex(item => item.path == route.path);
    getInitRecommend();
    // if(navCenterRef.value.offsetWidth>1000){
    //     afterMore.value = true;
    // }
    if (navCenterRef.value.offsetWidth < 1000) {
        // console.log("盒子的偏移",containerW);        
        navCenterRef.value.style.left = (500 - navCenterRef.value.offsetWidth / 2) + "px";
    }

})

// 点击兴趣爱好按钮
const handlerShow = () => {
    bus.emit('show', true)
    // 调用子组件的函数
    hobbiesRef.value.getHobbiesInit();

}




</script>

<style scoped>
.swiper {
    width: 100%;
    background-color: #fff;
    padding-top: 20px;
}

/* 轮播图 */
.headerSwiper {
    width: 1200px;
    height: 466px;
    margin: 0 auto;
}

.headerSwiper img {
    width: 100%;
    height: 100%;
    display: block;
}

/* 导航 */
.navContainerWrap {
    width: 100%;
    height: 80px;
    background-color: #fff;
    /* 粘性定位仅在父元素的范围内起左右 */
    position: sticky;
    top: 0;
    z-index: 1000;
    cursor: pointer;

}

.navContainer {
    width: 1200px;
    height: 100%;
    margin: 0 auto;
    font-size: 16px;
    position: relative;
    /* background-color: #0ff; */
    overflow: hidden;
    color: #7d8090;


}

.fixedBox {
    height: 60px;
    width: 1000px;
    margin: 0 auto;
    overflow: hidden;
    margin-top: 10px;
    /* background-color: aqua; */
    position: relative;
    /* 新增的 */
    /* display: flex;
    justify-content: center; */
}


.navCenter {
    /* background-color: skyblue; */
    margin: 0 auto;
    display: flex;
    justify-content: center;
    position: relative;
    /* 可以使窗口平稳滚动 */
    /* scroll-behavior: smooth; */
    white-space: nowrap;
    position: absolute;
    left: 0;
    top: 0;

}



.fixedBox.beforeMore::before {

    position: absolute;
    top: 0px;
    left: 0px;
    content: "";
    display: inline-block;
    width: 20px;
    height: 70px;
    background: #000;
    background: url(@/assets/images/shadow_left@3x.05a967c8.png);
    background-size: cover;
}

.fixedBox.afterMore::after {

    position: absolute;
    top: 0px;
    right: 0px;
    content: "";
    display: inline-block;
    width: 20px;
    height: 70px;
    background: url(@/assets/images/shadow_right@3x.db47ae95.png) 100%;
    background-size: cover;
    z-index: 3;
}

.navCenter li {

    margin: 0 20px;

}

.navCenter li a {
    display: block;
    font-size: 16px;
    color: #7d8090;
    text-decoration: none;
    padding: 20px 4px;


}

.navCenter a.active {
    color: #111;
    /* //选中时 */
    border-bottom: 3px solid #000;
}

.navContainer .hobby {
    position: absolute;
    right: 0;
    height: 80px;
    line-height: 80px;
    top: 0;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.navContainer .hobby svg {
    padding: 0 4px;
}

/* 加载更多按钮 */


/* 轮播图 */
.el-carousel__item h3 {
    color: #475669;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
    text-align: center;
}

.el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
    background-color: #d3dce6;
}


>>>.el-carousel__indicator {
    padding: 12px 11px;
}

>>>.el-carousel__button {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #fff;
}



/* 选择兴趣爱好 */
.hobbyTitle {
    position: relative;
    top: -30px;
}

.hobbyTitle .title {
    font-size: 18px;
    color: #000;
}

.hobbyTitle .title span {
    padding-left: 20px;
}

.hobbyTitle .text {
    margin-top: 10px;
    font-size: 14px;
    color: #b1b5c1;
}

.inputBox {
    width: 295px;
    position: relative;
}

/* icon图标 */
.inputIcon {
    width: 33px;
    height: 40px;
    /* background-color: #7d8090; */
    position: absolute;
    /* top: 0; */
    z-index: 2;
    text-align: center;
}


.tagListBox {
    height: 295px;
    /* position: relative; */
    color: #000;
}

.tagItem {
    margin: 10px 22px 11px 0;
    width: 98px;
    height: 38px;
    text-align: center;
    line-height: 38px;
    border: 1px solid #eee;
    float: left;
    position: relative;
}

.tagItem span {
    position: absolute;
    top: -10px;
    right: -10px;
    z-index: 9;
}

.tagItem.active {
    /* border-color: red; */
}

/* 面包屑 */
.crumbsBox {
    display: flex;
}

.crumbs {
    width: 98px;
    height: 38px;
    border: 1px solid #eee;
    margin: 0 22px 21px 0;
    line-height: 38px;
    text-align: center;
    position: relative;
    color: #000;
}

.crumbs span {
    position: absolute;
    top: -10px;
    right: -10px;
}
</style>